﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Map.aspx.cs" Inherits="ZHDJ.Web.Map" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="renderer" content="webkit" />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no" />
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <meta name="keywords" content="science,education,culture,politics,ecnomics,relationships,entertaiment,human" />
    <meta name="description" content="This page is about the meaning of science,education,culture,politics,ecnomics,relationships,entertaiment,human." />
    <meta name="author" content="Mr Shen,sgq625@126.com" />
    <meta name="revised" content="Mr Shen,2017-08-08 00:00:00" />
    <meta name="generator" content="HBuilder 8.8.0" />
    <title>党建地图</title>

    <link href="Resource/themes/default/css/bootstrap.min.css" rel="stylesheet" />
    <link href="Resource/themes/default/css/jquery.treeview.css" rel="stylesheet" />

    <script src="Resource/js/jquery.min.js"></script>
    <script src="Resource/js/bootstrap.min.js"></script>
    <script src="Resource/js/jquery.treeview.js"></script>
    <%--<script type="text/javascript" src="http://api.tianditu.com/api?v=4.0"></script>--%>
    <script type="text/javascript" src="http://www.sdmap.gov.cn/api/olapi/ol/openlayers.js"></script>
    <style type="text/css">
        .navbar {
            margin: 0;
            min-height: 100px;
            background: url(Resource/themes/default/images/Map/bg.jpg) no-repeat center;
            background-size: cover;
            border-radius: 4px;
            border-color: #e7e7e7;
        }

        .container-fluid {
            padding-right: 15px;
            padding-left: 15px;
            margin-right: auto;
            margin-left: auto;
        }


        .toolbarDiv {
            position: absolute;
            z-index: 1000;
            width: 100%;
            height: 32px;
            background: url(Resource/themes/default/images/Map/toolbar_bg.png) repeat-x 0 0;
        }

            .toolbarDiv li:hover {
                background-color: rgba(255, 0, 0, 0.6);
                color: #fff;
            }

        #vec_img {
            position: absolute;
            top: 3px;
            left: 10px;
            width: 127px;
            height: 22px;
            line-height: 22px;
            text-align: center;
            background-color: #fff;
            color: #4c4c4c;
            cursor: pointer;
            font-size: 12px;
            list-style-type: none;
        }

        .toolActive {
            background-color: red;
            border: red solid 1px;
            color: #fff;
        }

        .btnToolbar {
            float: right;
            margin-left: 12px;
            text-align: center;
            list-style: none;
            line-height: 24px;
            height: 26px;
            width: 54px;
            cursor: pointer;
            color: red;
            font-size: 12px;
        }

        .tdt-infowindow-content {
            width: 452px !important;
        }

        .tabcontroller {
            width: 100%;
        }

            .tabcontroller ul {
                list-style: none;
                width: 100%;
                overflow: hidden;
                padding: 0;
            }

                .tabcontroller ul li {
                    width: 50%;
                    float: left;
                    text-align: center;
                    cursor: pointer;
                    height: 40px;
                    line-height: 40px;
                    font-size: 14px;
                    font-weight: 700;
                    color: #fff;
                    background: #c1161d;
                }

            .tabcontroller .active {
                background: white;
                color: #333;
            }

            .tabcontroller li span {
                display: inline-block;
                width: 16px;
                height: 16px;
                background-repeat: no-repeat;
                background-position: center center;
                background-size: cover;
                vertical-align: middle;
            }

                .tabcontroller li span.org {
                    background-image: url(Resource/themes/default/images/Map/orgclick.png);
                }

            .tabcontroller li.active span.org {
                background-image: url(Resource/themes/default/images/Map/org.png);
            }

            .tabcontroller li span.screach {
                background-image: url(Resource/themes/default/images/Map/dh.png);
            }

            .tabcontroller li.active span.screach {
                background-image: url(Resource/themes/default/images/Map/dhclick.png);
            }

        .tabpanel {
            width: 100%;
        }

            .tabpanel .tab {
                display: none;
                /*min-height: 814px;*/
                padding: 20px;
            }

            .tabpanel .on {
                display: block;
            }


        #outter {
            height: 100%
        }

        #mapDiv {
            height: 100%;
            width: 100%
        }

        #describediv {
            line-height: 26px;
            padding: 10px;
            font-size: 13px;
            background-color: #FFF;
            background-position: bottom left;
            background-repeat: repeat-x;
            background-image: url("http://www.sdmap.gov.cn/api/olapi/images/describebac.jpg");
            border: solid 1px #808080;
            display: block;
            position: absolute;
            right: 36px;
            top: 60px;
            width: 260px;
            z-index: 1001;
            overflow-y: auto;
            -webkit-box-shadow: #4E4B4B 0px 3px 6px;
            -moz-box-shadow: #4E4B4B 0px 3px 6px;
            box-shadow: #4E4B4B 0px 3px 6px;
            z-index: 1003;
        }

        #reback {
            position: absolute;
            bottom: 10px;
            right: 100px;
            z-index: 1002;
        }

            #reback a {
                background-color: #7D7D7D;
                padding: 10px;
                color: #FFF;
            }

        .keyword {
            cursor: pointer;
            float: left;
            width: 18%;
            margin: 1%;
            font-size: 12px;
        }

        #screachItem li:hover {
            background-color: rgb(236,236,236);
        }

        .fixedbox {
            position: fixed;
            top: 20px;
            right: 20px;
            width: 60px;
            height: 60px;
            background: #c1161d;
            color: white !important;
            border-radius: 4px;
            font-size: 12px;
            text-align: center;
            padding: 0 !important;
        }

            .fixedbox:hover {
                background: #cc0000 !important;
            }

        .rightDiv {
            float: right;
            left: 290px;
            width: calc(100% - 290px);
            height: 854px;
            position: absolute;
        }

        .rightDiv1 {
            width: 100%;
            left: 0;
        }

        #resultDiv li {
            border-bottom: 1px solid #A4A4E9;
            cursor: pointer;
            padding: 3px 0;
        }

            #resultDiv li:hover {
                background-color: #F5EAEA;
            }

        .moveblock {
            z-index: 100000;
            position: absolute;
            left: 0;
            top: 50%;
            margin-top: -15px;
            width: 20px;
            height: 60px;
            background: #fff;
            text-align: center;
            line-height: 30px;
            cursor: pointer;
            border-radius: 0 5px 5px 0;
            background-repeat: no-repeat;
            background-position: center;
        }

        .moveblock-left {
            background-image: url(Resource/themes/default/images/Map/left.png);
        }

        .moveblock-right {
            background-image: url(Resource/themes/default/images/Map/right.png);
        }






        .main {
            width: 500px;
            margin: 0;
        }

            .main .tabtop {
                overflow: hidden;
                width: 100%;
                height: 40px;
                line-height: 40px;
                background: #f5f5f5;
            }

                .main .tabtop .tabcontroller1 {
                    width: 100%;
                }

                    .main .tabtop .tabcontroller1 ul {
                        list-style: none;
                        width: 100%;
                        margin: 0;
                        padding: 0;
                        overflow: hidden;
                    }

                        .main .tabtop .tabcontroller1 ul li {
                            float: left;
                            text-align: center;
                            cursor: pointer;
                            height: 40px;
                            line-height: 40px;
                            font-size: 14px;
                            color: #333333;
                            padding: 0 20px;
                            border-top: solid 1px transparent;
                            width: 33.333%
                        }

                    .main .tabtop .tabcontroller1 .active,
                    .main .tabtop .tabcontroller1 li:hover {
                        background: white;
                        color: #333;
                        border-top: solid 1px #fe1c27;
                    }

            .main .tabbottom {
                width: 100%;
                overflow: hidden;
            }

                .main .tabbottom .tabpanel1 {
                    width: 100%;
                    border: solid 0px teal;
                }

                    .main .tabbottom .tabpanel1 .tab {
                        width: 100%;
                        display: none;
                        height: 208px;
                        padding: 20px 0;
                    }

                    .main .tabbottom .tabpanel1 .on {
                        display: block;
                    }

                    .main .tabbottom .tabpanel1 .tab .img-wrap {
                        width: 120px;
                        height: 120px;
                        /*border: solid 1px red;*/
                    }

                        .main .tabbottom .tabpanel1 .tab .img-wrap img {
                            width: 100%;
                            height: auto;
                        }

                    .main .tabbottom .tabpanel1 .tab .details {
                        width: 360px;
                    }

                        .main .tabbottom .tabpanel1 .tab .details .detailsname {
                            width: 72px;
                            height: 24px;
                            line-height: 24px;
                            text-align: right;
                            color: #666;
                        }

                        .main .tabbottom .tabpanel1 .tab .details .detailscontent {
                            width: 288px;
                            line-height: 24px;
                            color: #333;
                        }

                    .main .tabbottom .tabpanel1 .tab .listgroup {
                        list-style: none;
                        width: 100%;
                        margin: 0;
                        padding: 0;
                    }

                        .main .tabbottom .tabpanel1 .tab .listgroup .listgroupitem {
                            width: 100%;
                            overflow: hidden;
                        }

                            .main .tabbottom .tabpanel1 .tab .listgroup .listgroupitem a {
                                float: left;
                                width: 400px;
                                text-decoration: none;
                                height: 28px;
                                line-height: 28px;
                                font-size: 14px;
                                color: #666;
                                white-space: nowrap;
                                text-overflow: ellipsis;
                                overflow: hidden;
                            }

                                .main .tabbottom .tabpanel1 .tab .listgroup .listgroupitem a:hover {
                                    color: #fe1c27;
                                }

                            .main .tabbottom .tabpanel1 .tab .listgroup .listgroupitem .date {
                                float: right;
                                text-decoration: none;
                                height: 24px;
                                line-height: 24px;
                                font-size: 12px;
                                color: #666;
                            }

        .btn-danger {
            color: #d43f3a;
            background-color: #fff;
        }

        .olControlOverviewMapElement {
            background-color: rgba(255, 255, 255, 0.00) !important;
        }
        .olPopupCloseBox {
            background: url("Resource/themes/default/images/Map/closed.png") no-repeat !important;
        }
        .olFrameDecoration {
            background-image: url("Resource/themes/default/images/Map/cloud-popup-relative.png") !important;
        }
    </style>
    <script type="text/javascript">
        var map;
        var layer_vec;//国家天地图图层-矢量
        var layer_img;//国家天地图图层-影像
        var sdvecLayer;//矢量图层
        var sdimgLayer;//影像图层
        var sdannoLayer;//注记图层
        var orgLayer;//党组织图层
        var graphicLayer;//标记物图层
        var pathLayer;//导航路线图层 
        var stationLayer;//导航站点图层 

        var popup; //弹出框 
        var measureTool_Path;//测量工具-线
        var measureTool_Polygon;//测量工具-面
        var selectControl;//选择控件 
        var centerPoint = new OpenLayers.LonLat(119.00, 36.40);//全图时的中心点
        var addGraphics = [];
        var DPR_LNG = 6378140 * Math.PI / 180, DPR_C = .80385;//用于绘制导航轨迹动画

        $(function () {
            map = new OpenLayers.Map("mapDiv", {
                allOverlays: true,
                numZoomLevels: 19,
                displayProjection: "EPSG:4490",
                controls: [
                    new OpenLayers.Control.Navigation(),
                    new OpenLayers.Control.ArgParser(),
                    new OpenLayers.Control.Attribution()]
            });
            //创建国家天地图图层 -矢量
            layer_vec = new OpenLayers.Layer.WMTS({
                name: "国家天地图-矢量",
                url: ["http://t7.tianditu.com/vec_c/wmts", "http://t0.tianditu.com/vec_c/wmts", "http://t1.tianditu.com/vec_c/wmts", "http://t2.tianditu.com/vec_c/wmts", "http://t3.tianditu.com/vec_c/wmts", "http://t4.tianditu.com/vec_c/wmts", "http://t5.tianditu.com/vec_c/wmts", "http://t6.tianditu.com/vec_c/wmts"],
                layer: "vec",
                style: "default",
                matrixSet: "c",
                format: "tiles",
                transparent: true
            });
            //创建国家天地图图层-影像
            layer_img = new OpenLayers.Layer.WMTS({
                name: "国家天地图-影像",
                url: ["http://t7.tianditu.com/img_c/wmts", "http://t0.tianditu.com/img_c/wmts", "http://t1.tianditu.com/img_c/wmts", "http://t2.tianditu.com/img_c/wmts", "http://t3.tianditu.com/img_c/wmts", "http://t4.tianditu.com/img_c/wmts", "http://t5.tianditu.com/img_c/wmts", "http://t6.tianditu.com/img_c/wmts"],
                layer: "img",
                style: "default",
                matrixSet: "c",
                format: "tiles",
                transparent: true
            });

            map.addLayer(layer_vec);

            //矢量图层初始化
            sdvecLayer = new SDTDTLayer();
            //影像图层初始化
            sdimgLayer = new SDRasterLayer();
            //注记图层初始化
            sdannoLayer = new SDRSAnnoLayer();
            //叠加山东地图 
            map.addLayer(sdvecLayer);
            GlobalMap();
            //党组织图层，放组织位置，不会删除修改上面的标志物
            orgLayer = new OpenLayers.Layer.Vector("orgLayer", { style: OpenLayers.Util.extend({}, OpenLayers.Feature.Vector.style['default']) });
            map.addLayer(orgLayer);

            graphicLayer = new OpenLayers.Layer.Vector("graphicLayer", { style: OpenLayers.Util.extend({}, OpenLayers.Feature.Vector.style['default']) });
            map.addLayer(graphicLayer);


            //添加缩放平移控件
            var zoomctl = new OpenLayers.Control.PanZoomBar();
            map.addControl(zoomctl);


            //设置比例尺控件尺码单位
            OpenLayers.INCHES_PER_UNIT["千米"] = OpenLayers.INCHES_PER_UNIT["km"];
            OpenLayers.INCHES_PER_UNIT["米"] = OpenLayers.INCHES_PER_UNIT["m"];
            OpenLayers.INCHES_PER_UNIT["英里"] = OpenLayers.INCHES_PER_UNIT["mi"];
            OpenLayers.INCHES_PER_UNIT["英尺"] = OpenLayers.INCHES_PER_UNIT["ft"];
            //添加比例尺控件
            var scalebar = new OpenLayers.Control.ScaleLine({
                maxWidth: 200,
                topOutUnits: "千米",
                topInUnits: "米",
                bottomOutUnits: "",
                bottomInUnits: ""
            });
            map.addControl(scalebar);


            var params = {
                LAYERS: [2],
                TRANSPARENT: true,
                STYLES: "",
                FORMAT: "image/png"
            };
            var wmsLayer = new OpenLayers.Layer.WMS("山东行政区划地图",
                "http://124.128.48.217:6080/arcgis/services/sdxzj/MapServer/WMSServer",
                params, { isBaseLayer: true, opacity: 0.8, singleTile: true });
            //添加鹰眼图
            var overview = new OpenLayers.Control.OverviewMap({
                maximized: true,
                layers: [wmsLayer]
            });
            map.addControl(overview);


            //定义测量样式 
            var sketchSymbolizers = {
                "Point": {
                    pointRadius: 4,
                    graphicName: "square",
                    fillColor: "white",
                    fillOpacity: 1,
                    strokeWidth: 1,
                    strokeOpacity: 1,
                    strokeColor: "#333333"
                },
                "Line": {
                    strokeWidth: 2,
                    strokeOpacity: 0.7,
                    strokeColor: "#666666",
                    strokeDashstyle: "solid"
                },
                "Polygon": {
                    strokeWidth: 2,
                    strokeOpacity: 1,
                    strokeColor: "#666666",
                    fillColor: "white",
                    fillOpacity: 0.3
                }
            };
            var style = new OpenLayers.Style();
            style.addRules([
                new OpenLayers.Rule({ symbolizer: sketchSymbolizers })
            ]);
            var styleMap = new OpenLayers.StyleMap({ "default": style });
            var currFeature = null;

            //创建测量工具-线
            measureTool_Path = new OpenLayers.Control.Measure(
                OpenLayers.Handler.Path, {
                    persist: true,
                    immediate: true,
                    geodesic: true,
                    handlerOptions: {
                        layerOptions: {
                            styleMap: styleMap
                        }
                    }
                }
            );
            measureTool_Path.events.on({
                "measure": measurePathOver,
                "measurepartial": measurePath
            });
            map.addControl(measureTool_Path);
            function measurePathOver(event) {
                console.log('测距结束');
            }
            function measurePath(event) {
                if (event.measure == 0) {
                    var lon = event.geometry.components[0].x;
                    var lat = event.geometry.components[0].y;
                    graphicLayer.removeAllFeatures();
                    var feature = CreateFeature(lon, lat, '起点');
                    graphicLayer.addFeatures(feature);
                } else {
                    var length = event.geometry.components.length;
                    var label;
                    if (event.units == 'm') {
                        label = event.measure.toFixed(3) + '米';
                    } else {
                        label = event.measure.toFixed(3) + '千米';
                    }
                    var lon = event.geometry.components[length - 1].x;
                    var lat = event.geometry.components[length - 1].y;

                    //移除当前坐标长度
                    if (currFeature != null) {
                        graphicLayer.destroyFeatures(currFeature);
                        currFeature = null;
                    }
                    //添加当前坐标长度
                    currFeature = CreateFeature(lon, lat, label);
                    graphicLayer.addFeatures(currFeature);

                    //保留折点信息
                    if (graphicLayer.features.length < length) {
                        lon = event.geometry.components[length - 2].x;
                        lat = event.geometry.components[length - 2].y;
                        graphicLayer.addFeatures(CreateFeature(lon, lat, label))
                    }
                }
            }

            //创建测量工具-面
            measureTool_Polygon = new OpenLayers.Control.Measure(
                OpenLayers.Handler.Polygon, {
                    persist: true,
                    immediate: true,
                    geodesic: true,
                    handlerOptions: {
                        layerOptions: {
                            styleMap: styleMap
                        }
                    }
                }
            );
            measureTool_Polygon.events.on({
                "measure": measurePolygonOver,
                "measurepartial": measurePolygon
            });
            map.addControl(measureTool_Polygon);
            function measurePolygonOver(event) {
                console.log('测面结束');
            }
            function measurePolygon(event) {
                var centroid = event.geometry.getCentroid();
                if (currFeature != null) {
                    graphicLayer.destroyFeatures(currFeature);
                    currFeature = null;
                }
                var label;
                if (event.units == 'm') {
                    label = event.measure.toFixed(3) + '平方米';
                } else {
                    label = event.measure.toFixed(3) + '平方千米';
                }
                //添加当前区域的面积
                currFeature = CreateFeature(centroid.x, centroid.y, label);
                graphicLayer.addFeatures(currFeature);
            }
            //创建符号类
            function CreateFeature(lon, lat, label) {
                var pt = new OpenLayers.Geometry.Point(lon, lat);
                //设置样式和标签内容 
                var style = {
                    label: label,
                    fontSize: "12px",
                    fontColor: "#ff0000",
                    fontWeight: "bold"
                };
                return new OpenLayers.Feature.Vector(pt, null, style);
            }


            //创建选择控件 
            selectControl = new OpenLayers.Control.SelectFeature(orgLayer);
            map.addControl(selectControl);
            selectControl.activate();
            var data = <%=json%>;
            poisData(data);


            function poisData(orgs) {
                for (var i = 0; i < orgs.length; i++) {
                    var org = orgs[i];
                    if (org.XPoint != null && org.YPoint != null) {
                        var ptf = new OpenLayers.Feature.Vector(new OpenLayers.Geometry.Point(org.XPoint, org.YPoint), null, { externalGraphic: '/Resource/themes/default/images/Map/markerA.png', graphicWidth: 19, graphicHeight: 27 });
                        ptf.data = org;
                        orgLayer.addFeatures(ptf);
                    }
                }
                orgLayer.events.on({ "featureselected": featureSelected });
            }
            function featureSelected(fea) {
                var orgFeature = fea.feature;
                var org = orgFeature.data;
                //名称
                var name = org.BranchName;
                //联系人
                var linkMan = org.LinkMan;
                //联系电话
                var linkPhone = org.LinkPhone;
                //地址
                var address = org.Address;
                //图片地址
                var imgUrl = org.ImageUrl;
                //组织唯一编号
                var branchId = org.BranchID;

                //弹出组织信息
                popOrginfoDialog(name, linkMan, linkPhone, address, orgFeature.geometry.x, orgFeature.geometry.y, imgUrl, branchId);

                selectControl.unselectAll();
            }

            $("#moveblock").click(function () {
                $("#leftDiv").toggle();
                $("#rightDiv").toggleClass("rightDiv1");
                $(this).toggleClass("moveblock-right");
            });

            $("#browser").treeview({
                persist: "location",
                collapsed: false,
                unique: true,
                toggle: function () {
                    //console.log("%s was toggled.", $(this).find(">span").text());
                }
            });

            $('.tabcontroller li').click(function () {
                var index = $(this).index();
                $(this).addClass('active').siblings().removeClass('active');
                $('.tabpanel .tab').eq(index).show().siblings().hide();
            });

            $('#vec_img div').click(function () {
                var index = $(this).index();

                $(this).addClass('toolActive').siblings().removeClass('toolActive');
            });

            //初始化路径分析对象 
            PathSearch.init(map);
        });
        //加载矢量（普通）地图
        function switchVecLayer() {
            removeAllLayers();

            map.addLayer(layer_vec);
            map.addLayer(sdvecLayer);
            map.addLayer(orgLayer);
            map.addLayer(graphicLayer);
            map.addLayers([pathLayer, stationLayer]);
        }
        //加载影像和标注图层
        function switchImgLayer() {
            removeAllLayers();

            map.addLayer(layer_img);
            map.addLayer(sdimgLayer);
            map.addLayer(sdannoLayer);
            map.addLayer(orgLayer);
            map.addLayer(graphicLayer);
        }
        function removeAllLayers() {
            for (var i = 0; i < map.layers.length; i++) {
                if (map.layers[i] == orgLayer) continue;
                map.removeLayer(map.layers[i]);
                i--;
            }
        }
        function ClearMap() {
            measureTool_Path.deactivate();
            measureTool_Polygon.deactivate();
            graphicLayer.removeAllFeatures();
            if (popup)
                map.removePopup(popup);
            PathSearch.clearResult();
        }
        //全图功能
        function GlobalMap() {
            map.setCenter(centerPoint, 8);
        }

        function popOrginfoDialog(name, linkMan, linkPhone, address, xpoint, ypoint, imgId, branchId, isCenter) {
            var html =
                '<div class="main">' +
                '<div class="tabtop">' +
                '<div class="tabcontroller1">' +
                '<ul>' +
                '<li class="active">支部简介</li>' +
                '<li>志愿者活动</li>' +
                '<li>上级精神</li>' +
                '</ul>' +
                '</div>' +
                '</div>' +
                '<div class="tabbottom tabbottom1">' +
                '<div class="tabpanel1">' +
                //tab1
                '<div class="tab clearfix on">' +
                '<div class="pull-left img-wrap">' +
                '<img id="imgBranch" src="Resource/themes/default/images/Map/party-flag-icon.png" alt="' + name + '" />' +
                '</div>' +
                '<div class="pull-right details">' +
                '<div class="clearfix">' +
                '<div class="pull-left detailsname">组织名称：</div>' +
                '<div class="pull-left detailscontent">' +
                name +
                '</div>' +
                '</div>' +
                '<div class="clearfix">' +
                '<div class="pull-left detailsname"">姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名：</div>' +
                '<div class="pull-left detailscontent">' +
                linkMan +
                '</div>' +
                '</div>' +
                '<div class="clearfix">' +
                '<div class="pull-left detailsname">联系电话：</div>' +
                '<div class="pull-left detailscontent">' +
                linkPhone +
                '</div>' +
                '</div>' +
                '<div class="clearfix">' +
                '<div class="pull-left detailsname">地&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;址：</div>' +
                '<div class="pull-left detailscontent">' +
                address +
                '</div>' +
                '</div>' +
                '</div>' +
                '</div>' +
                //tab2
                '<div class="tab">' +
                '<ul class="listgroup" id="partActive">' +
                //'<li class="listgroupitem">' +
                //'<a href="javascript:void(0);">内容内容内容内容内容内容</a>' +
                //'<div class="date">2018-08-02</div></li>' +
                '</ul>' +
                '</div>' +
                //tab3
                '<div class="tab">' +
                '<ul class="listgroup "id="superiorsSpirit">' +
                //'<li class="listgroupitem">' +
                //'<a href="javascript:void(0);">内容内容内容内容内容内容</a>' +
                //'<div class="date">2018-08-02</div></li>' +
                '</ul>' +
                '</div></div></div>'
            if (popup)
                map.removePopup(popup);
            var point = new OpenLayers.LonLat(xpoint, ypoint);
            if (isCenter) {
                map.setCenter(point);
            }
            //创建弹出框 
            popup = new OpenLayers.Popup.FramedCloud("xxPopub", point, null, html, null, true);
            map.addPopup(popup);

            LoadBranchImg(imgId);//获取组织图片
            GetActivitieTitle(branchId);//获取志愿者活动
            GetSuperiorsSpirit(branchId);//获取上级精神
            $('.tabcontroller1 li').hover(function () {
                var index = $(this).index();
                $(this).addClass('active').siblings().removeClass('active');
                $('.tabbottom1 .tabpanel1 .tab').eq(index).show().siblings().hide();
            });

            //关闭按钮style
            $(".olPopupCloseBox").css("top","-13px").css("right","-9px");
        }
        function LoadBranchImg(imgId) {
            if (imgId && imgId != null && imgId != 'null') {
                $.ajax({
                    url: "Map.aspx/GetImgURLbyImgId",
                    type: "post",
                    contentType: "application/json",
                    dataType: "json",
                    data: "{imgId:\"" + imgId + "\"}",
                    success: function (data) {
                        $("#imgBranch").attr('src', data.d);
                    }
                });
            }
        }
        function GetActivitieTitle(branchId) {
            if (branchId) {
                //branchId = '';
                $.ajax({
                    url: "Map.aspx/GetActivitieTitle",
                    type: "post",
                    contentType: "application/json",
                    dataType: "json",
                    data: "{branchId:\"" + branchId + "\",pageSize:\"5\",startIndex:\"0\"}",
                    success: function (data) {
                        var html = '';
                        var actives = JSON.parse(data.d);
                        $("#partActive").empty();
                        for (var i = 0; i < actives.length; i++) {
                            html += '<li class="listgroupitem" onclick="window.open(\'Portal/VolunteerActivitie/VolunteerActiviteDetail.aspx?ID=' + actives[i].ID + '\')"><a href="javascript:void(0);"> ' + actives[i].Title + '</a><div class="date">' + actives[i].CreateTime.substring(0, 10) + '</div></li>';
                        }
                        html += '<a class="pull-right" onclick="window.open(\'Portal/VolunteerActivitie/VolunteerActiviteMore.aspx?module=VolunteerActivitie&category=Call&BranchID=' + branchId + '\')" href="javascript:void(0);" style="width: auto;color:red;">更多>></a>';
                        $("#partActive").append(html);
                    }
                });
            }
        }
        function GetSuperiorsSpirit(branchId) {
            if (branchId) {
                $.ajax({
                    url: "Map.aspx/GetSuperiorsSpirit",
                    type: "post",
                    contentType: "application/json",
                    dataType: "json",
                    data: "{branchId:\"" + branchId + "\",pageSize:\"5\",startIndex:\"0\"}",
                    success: function (data) {
                        var html = '';
                        var spirits = JSON.parse(data.d);
                        $("#superiorsSpirit").empty();
                        for (var i = 0; i < spirits.length; i++) {
                            html += '<li class="listgroupitem" onclick="window.open(\'ArticleDetailContent.aspx?ID=' + spirits[i].ID + '\')"><a href="javascript:void(0);"> ' + spirits[i].Title + '</a><div class="date">' + spirits[i].CreateTime.substring(0, 10) + '</div></li>';
                        }
                        html += '<a class="pull-right" onclick="window.open(\'MorePage.aspx?module=MassLine&category=SuperiorsSpirit\')" href="javascript:void(0);" style="width: auto;color:red;">更多>></a>';
                        $("#superiorsSpirit").append(html);
                    }
                });
            }
        }





        function ScreachScreen() {
            var keyValue = $('#keyValue').val();
            if (keyValue) {
                ScreachOrg();
            }
        }
        function ScreachBack() {
            $('#orgTree').css('display', 'block');
            $('#screachItem').css('display', 'none');
            $('#keyValue').val('');
        }
        function QuickScreach(value) {
            $('#keyValue').val(value);
            ScreachScreen();
        }
        function ScreachOrg() {
            $.ajax({
                url: "Map.aspx/ScreachOrgByKeyword",
                type: "post",
                contentType: "application/json",
                dataType: "json",
                data: "{keyword:\"" + $('#keyValue').val() + "\"}",
                success: function (data) {
                    var orgs = JSON.parse(data.d);
                    ScreachResult(orgs);
                }
            });
        }
        function ScreachResult(orgs) {
            $('#screachItem').css('display', 'block');
            $('#orgTree').css('display', 'none');
            $('#screachCount').text(orgs.length);
            $("#resultlist").empty();

            var html = '';
            for (var i = 0; i < orgs.length; i++) {
                var org = orgs[i];
                html += '<div class="list-group" style="font-size:14px;margin-bottom: 0;">';
                if (org.XPoint != null && org.YPoint != null && IsInFeatures(org.BranchID)) {
                    html += '<a href="javascript:void(0);" onclick="popOrginfoDialog(\'' + org.BranchName + '\', \'' + org.LinkMan + '\', \'' + org.LinkPhone + '\', \'' + org.Address + '\', ' + org.XPoint + ', ' + org.YPoint + ', \'' + org.ImageUrl + '\', \'' + org.BranchID + '\', true)" class="list-group-item clearfix" style="padding: 10px;border: none;">';
                    html += '<div class="pull-left" style="min-width: 28px;height: 28px;">';
                    html += '<img src="Resource/themes/default/images/Map/wz.png" alt="' + org.BranchName + '" style="width: 100%;height: auto;" />';
                    html += '</div>';
                    html += '<div class="pull-left" style="width:80%;">';
                    html += '<div class="text-danger">' + org.BranchName + '</div>';
                } else {
                    html += '<a href="javascript:void(0);" class="list-group-item clearfix" style="padding: 10px;border: none;">';
                    html += '<div class="pull-left" style="min-width: 28px;height: 28px;">';
                    html += '<img src="Resource/themes/default/images/Map/wz.png" alt="' + org.BranchName + '" style="width: 100%;height: auto;" />';
                    html += '</div>';
                    html += '<div class="pull-left" style="width:80%;">';
                    html += '<div class="text-danger">' + org.BranchName + '<span style="color:#C1C1C1;font-size:8px;">(无位置信息)</span></div>';
                }
                if (org.LinkPhone)
                    html += '<div>联系电话：' + org.LinkPhone + '</div>';
                if (org.Address)
                    html += '<div>地址：' + org.Address + '</div>';
                html += '</div>';
                html += '</a>';
                html += '</div>';

                $("#resultlist").append(html)
            }
        }
        function IsInFeatures(value) {
            var b = false;
            for (var i = 0; i < orgLayer.features.length; i++) {
                if (orgLayer.features[i].data.BranchID == value) {
                    b = true;
                    break;
                }
            }

            return b;
        }

        var PathSearch = function () {
            var startpt = null, endpt = null; //导航起点和终点 
            var inited = false; //是否被初始化 
            var map = null, renderer = null, drawTool = null, //标绘工具 
                editidx = -1,
                geoPath = null,
                geoSeg = null,
                pathList = [],
                searchType = 1;
            var pfeatures = [];
            //发送请求 
            function requestData(parm) {
                $("#resultDiv").empty().append('<span style="font-size:12px;">查询中...<span>');
                $.ajax({
                    type: "GET",
                    url: "MapService/proxy.ashx?http://www.sdmap.gov.cn/PathService.ashx?type=search&postStr=" + JSON.stringify(parm),
                    dataType: "xml",
                    success: parseData,
                    error: function (a, b) {
                        if (console.log) {
                            console.log("数据请求" + b);
                        }
                    }
                });
            }
            //解析数据 
            function parseData(a, b, c) {
                if (b != "success")
                    return;

                var resultDom = a; //string2xml(a); 
                var e_dis = resultDom.getElementsByTagName("distance")[0];
                var dst = e_dis.textContent || e_dis.text;
                var e_dur = resultDom.getElementsByTagName("duration")[0];
                var dura = e_dur.textContent || e_dur.text;
                var e_pts = resultDom.getElementsByTagName("routelatlon")[0];
                e_pts = e_pts.textContent || e_pts.text;
                var points = e_pts.split(";");
                points.pop(); //去掉空尾巴 
                if (dst == "" || dura == "" || points.length == 0) return;

                //绘制导航路线 
                displayResult(1, makeLine(points));

                var routs = resultDom.getElementsByTagName("routes")[0].getElementsByTagName("item");
                pathList = [];
                pathList.push({
                    note: "",
                    lonlat: resultDom.documentElement.getAttribute("orig")
                });
                //导航分段 
                for (var i = 0; i < routs.length; i++) {
                    var note = routs[i].getElementsByTagName("strguide")[0];
                    var coord = routs[i].getElementsByTagName("turnlatlon")[0];
                    pathList.push({
                        note: note.textContent || note.text,
                        lonlat: coord.textContent || coord.text
                    });
                }
                pathList.push({
                    note: "",
                    lonlat: resultDom.documentElement.getAttribute("dest")
                });
                //显示导航信息提示列表 
                displayResult(2);
            }
            //导航信息展示 
            function displayResult(type, obj) {
                if (type == 1) { //linstring 
                    pathLayer.removeAllFeatures();
                    stationLayer.removeAllFeatures();
                    var style_feature2 = OpenLayers.Util.extend({}, OpenLayers.Feature.Vector.style['default']);
                    style_feature2.strokeColor = "#3231fb";
                    style_feature2.strokeOpacity = 1;
                    style_feature2.strokeWidth = 3;
                    style_feature2.cursor = "pointer";

                    geoPath = new OpenLayers.Feature.Vector(obj);
                    geoPath.style = style_feature2;
                    pathLayer.addFeatures(geoPath);
                    stationLayer.addFeatures(pfeatures);

                    DrawFlowPath(geoPath.geometry, pathLayer);
                    map.zoomToExtent(geoPath.geometry.getBounds());
                } else if (type == 2) { //列表 
                    var ul = $('<ul style="list-style-type:none;padding-left:10px;"></ul>');
                    for (var i = 1; i < pathList.length - 1; i++) {
                        var v = i + ". " + pathList[i].note;
                        ul.append($("<li id='p_ul_" + i + "'></li>").text(v))
                            .append("<div class='bm'></div>");
                    }
                    $("#resultDiv").empty().append(ul);
                }
            }

            //设置当前标绘状态 
            function startMark(idx) {
                editidx = idx;
                drawTool.activate();
            }
            //标绘完成回调 
            function drawCompletedHandler(f, pi) {
                var fea = f.feature;
                if (editidx == -2) {
                    getDecode(fea.geometry, $("#startPoint"));
                    //$("#startPoint").val(fea.geometry.x.toFixed(5) + "," + fea.geometry.y.toFixed(5));
                    PathSearch.setStart(fea);
                }
                else if (editidx == -3) {
                    getDecode(fea.geometry, $("#endPoint"));
                    //$("#endPoint").val(fea.geometry.x.toFixed(5) + "," + fea.geometry.y.toFixed(5));
                    PathSearch.setEnd(fea);
                }

                drawTool.deactivate();
                editidx = -1;
            }
            function getDecode(geometry, target) {
                $.ajax({
                    type: "GET",
                    url: "MapService/proxy.ashx?http://www.sdmap.gov.cn/GeoDecodeService.ashx?st=Rgc2&output=jsontype=11&point=" + geometry.x + "," + geometry.y,
                    dataType: "xml",
                    success: function (a, b, c) {
                        if (b == "success") {
                            var address = a.getElementsByTagName("address")[0];
                            if (address) {
                                target.val(address.text || address.textContent);
                            } else {
                                target.val(geometry.x.toFixed(5) + "," + geometry.y.toFixed(5));
                            }
                        } else {
                            target.val(geometry.x.toFixed(5) + "," + geometry.y.toFixed(5));
                        }
                    }
                });
            }
            //导航信息提示列表点击事件，缩放定位到分段路线 
            function pathItemClicked(evt, b) {
                if (!geoSeg) {
                    geoSeg = new OpenLayers.Feature.Vector();
                    var sty = OpenLayers.Util.extend({}, OpenLayers.Feature.Vector.style['default']);
                    sty.strokeColor = "#B318F3";
                    sty.strokeOpacity = 0.6;
                    sty.strokeWidth = 7;
                    geoSeg.style = sty;

                } else {
                    pathLayer.removeFeatures(geoSeg);
                }
                var id = evt.target.id.replace("p_ul_", "");
                id = parseInt(id);
                var vertics = geoPath.geometry.getVertices();
                var endp = pathList[id + 1].lonlat.split(",");
                var endx = parseFloat(endp[0]), endy = parseFloat(endp[1]);
                var i = 0;
                var pArr = [];
                if (id == 1) { //第一段 
                    for (; i < vertics.length; i++) {
                        pArr.push(vertics[i]);
                        if (vertics[i].x == endx && vertics[i].y == endy)
                            break;
                    }
                    geoSeg.geometry = new OpenLayers.Geometry.LineString(pArr);
                } else {
                    var startp = pathList[id].lonlat.split(",");
                    var startx = parseFloat(startp[0]), starty = parseFloat(startp[1]);
                    for (; i < vertics.length; i++) {
                        if (vertics[i].x == startx && vertics[i].y == starty)
                            break;
                    }
                    if (id == pathList.length - 1) { //final 
                        for (; i < vertics.length; i++) {
                            pArr.push(vertics[i]);
                        }
                        geoSeg.geometry = new OpenLayers.Geometry.LineString(pArr);

                    } else { //Middle 
                        for (; i < vertics.length; i++) {
                            pArr.push(vertics[i]);
                            if (vertics[i].x == endx && vertics[i].y == endy)
                                break;
                        }
                        geoSeg.geometry = new OpenLayers.Geometry.LineString(pArr);
                    }
                }
                pathLayer.addFeatures(geoSeg);

                if (geoSeg) {
                    map.zoomToExtent(geoSeg.geometry.getBounds());
                    map.zoomTo(map.zoom - 1);
                    if (map.getScale() < 4000)
                        map.zoomToScale(4509);
                    map.setCenter(geoSeg.geometry.getCentroid());
                }
            }

            return {
                init: function (_map) {

                    map = _map;
                    var myStyles = new OpenLayers.StyleMap({
                        fillOpacity: 1,
                        pointRadius: 2
                    });
                    // 创建图层，并添加feature    
                    pathLayer = new OpenLayers.Layer.Vector("pathsearchLayer", {
                        styleMap: myStyles,
                        rendererOptions: { zIndexing: false }
                    });
                    stationLayer = new OpenLayers.Layer.Vector("stationLayer", {
                        styleMap: myStyles,
                        rendererOptions: { zIndexing: false }
                    });
                    renderer = OpenLayers.Util.getParameters(window.location.href).renderer;
                    renderer = (renderer) ? [renderer] : OpenLayers.Layer.Vector.prototype.renderers;
                    drawTool = new OpenLayers.Control.DrawFeature(stationLayer,
                        OpenLayers.Handler.Point, {
                            handlerOptions: {
                                layerOptions: {
                                    renderers: renderer,
                                    styleMap: myStyles
                                }
                            }
                        });

                    drawTool.events.on({ "featureadded": drawCompletedHandler });

                    map.addLayers([pathLayer, stationLayer]);


                    map.addControl(drawTool);

                    $("#resultDiv").delegate("li", "click", pathItemClicked);

                    $(":radio").click(function (evt) {
                        if (this.checked) {
                            searchType = this.value;
                            PathSearch.doSearch();
                        }

                    });

                    inited = true;
                },
                doSearch: function () {
                    if (startpt != null && endpt !== null) {
                        pfeatures = [];
                        pfeatures.push(startpt);

                        pfeatures.push(endpt);
                        var parm = {
                            orig: startpt.geometry.x + "," + startpt.geometry.y,
                            dest: endpt.geometry.x + "," + endpt.geometry.y,
                            style: searchType
                        };
                        requestData(parm);
                    }
                },
                setStart: function (p, c) {//p=null:鼠标标绘，c=1:关键字检索  
                    if (p == null) {
                        startMark(-2);
                    } else {
                        stationLayer.removeFeatures(startpt);
                        var style_feature2 = OpenLayers.Util.extend({}, OpenLayers.Feature.Vector.style['default']);
                        style_feature2.externalGraphic = "Resource/themes/default/images/Map/start.png";
                        style_feature2.graphicWidth = 29;
                        style_feature2.graphicHeight = 30;
                        style_feature2.fillOpacity = 1;
                        style_feature2.cursor = "pointer";
                        p.style = style_feature2;
                        if (c == null) {
                            stationLayer.redraw();
                        }

                        startpt = p;
                        PathSearch.doSearch();
                    }
                },
                setEnd: function (p, c) {
                    if (p == null) {
                        startMark(-3);
                    } else {
                        stationLayer.removeFeatures(endpt);
                        var style_feature2 = OpenLayers.Util.extend({}, OpenLayers.Feature.Vector.style['default']);
                        style_feature2.externalGraphic = "Resource/themes/default/images/Map/end.png";
                        style_feature2.graphicWidth = 29;
                        style_feature2.graphicHeight = 30;
                        style_feature2.fillOpacity = 1;
                        style_feature2.cursor = "pointer";
                        p.style = style_feature2;
                        if (c == null) {
                            stationLayer.redraw();
                        }
                        endpt = p;
                        PathSearch.doSearch();
                    }
                },
                clearResult: function () {
                    pathList = [];
                    searchType = 1;
                    editidx = -1;
                    $("#resultDiv").empty();
                    pathLayer.removeAllFeatures();
                    stationLayer.removeAllFeatures();
                    startpt = null;
                    endpt = null;
                    $("#startPoint").val('');
                    $("#endPoint").val('');
                }
            };
        }();
        function makeLine(pArr) {
            var pointArr = [];
            for (var i = 0; i < pArr.length; i++) {
                var pt = pArr[i].split(",");
                pointArr.push(new OpenLayers.Geometry.Point(parseFloat(pt[0]), parseFloat(pt[1])));
            }
            return new OpenLayers.Geometry.LineString(pointArr);
        }
        function interopGeoSeg2(l, c) {
            var m = [],
                g = 0;
            c /= DPR_LNG;
            for (var h = 0; h < l.length - 1; h++) {
                var k = l[h].x - l[h + 1].x,
                    b = l[h].y - l[h + 1].y,
                    a = k * DPR_C,
                    e = Math.sqrt(a * a + b * b);
                0 != g && (e += g, g = 0);
                a = e / c;
                a = Math.round(a);
                if (0 == a) g += e;
                else {
                    for (var f, d = [], r = 1; r < a; r++) e = l[h].x - k / a * r,
                        f = l[h].y - b / a * r,
                        d.push(new OpenLayers.Geometry.Point(e, f));
                    d.push(l[h + 1]);
                    m.push({
                        idx: h,
                        seg: d
                    })
                }
            }
            return m
        }
        function DrawFlowPath(l, c, m) {
            var g = l.getGeodesicLength();
            m || (m = 1E3 > g ? 2E3 : 1E4 > g ? 3E3 : 4E3);
            m = 40 * g / m;
            var h = l.getVertices(),
                k = interopGeoSeg2(h, m),
                b = OpenLayers.Util.extend({},
                    OpenLayers.Feature.Vector.style["default"]);
            b.strokeColor = "#f00";
            b.strokeOpacity = 1;
            b.strokeWidth = 5;
            var a = k.length,
                e = 0,
                f = 1,
                d, r = [],
                t = setInterval(function () {
                    e == a ? (clearInterval(t), c.removeFeatures(d)) : d ? f == k[e].seg.length ? (e++ , r = e != a ? h.slice(0, k[e].idx) : h, c.removeFeatures(d), d = new OpenLayers.Feature.Vector(new OpenLayers.Geometry.LineString(r), null, b), c.addFeatures(d), f = 0) : (d.geometry.addPoint(k[e].seg[f]), f++ , c.redraw()) : (d = new OpenLayers.Feature.Vector(new OpenLayers.Geometry.LineString([k[e].seg[0]]), null, b), c.addFeatures(d))
                },
                    10)
        }
    </script>

</head>

<body>
    <div class="navbar" style="border: none;">
        <div class="container-fluid">
            <div class="navbar-header">
                <a class="navbar-brand" href="javascript:void(0);" style="width: 583px; height: 74px;">
                    <img src="Resource/themes/default/images/Map/logo.png" style="width: 583px; height: 74px;" /></a>
            </div>
            <div>
                <ul class="nav navbar-nav navbar-right">
                    <li>
                        <a class="fixedbox" href="Default.aspx">
                            <img src="Resource/themes/default/images/Map/return.png" style="width: 22px; height: 22px; margin: 8px auto;" />
                            <div>返回首页</div>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>

    <div id="leftDiv" style="float: left; width: 290px; height: 854px; background-color: #fff;">
        <div class="tabcontroller">
            <ul>
                <li class="active"><span class="org"></span>&nbsp;组织</li>
                <li><span class="screach"></span>&nbsp;导航</li>
            </ul>
        </div>

        <div class="tabpanel" style="overflow-y: auto; overflow-x: hidden; height: 800px;">
            <div id="main" class="tab on" style="padding:10px;">
                <div style="margin-bottom: 10px;overflow: hidden;">
                    <input type="text" style="width: calc(100% - 45px);height: 28px;float: left;border: solid 1px #b3b3b3;border-right:0;" id="keyValue" placeholder="搜索" />
                    <input type="button" style="width: 45px;height: 28px;float: left;border: solid 0 #b3b3b3;background: url(Resource/themes/default/images/Map/combg.png) no-repeat -225px -89px;" value="" onclick="ScreachScreen()" />
                </div>
                <div id="orgTree">
                    <ul id="browser" class="filetree treeview-famfamfam">
                        <asp:Literal ID="liTree" runat="server"></asp:Literal>
                    </ul>
                </div>
                <div style="margin: 5px 0 5px 0; display: none;" id="screachItem">
                    <div class="clearfix" style="padding: 0 0 10px 0;">
                        <div class="pull-left">
                            搜索结果<span class="text-danger">(<span class="text-danger" id="screachCount">0</span>)</span>
                        </div>
                        <div class="pull-right">
                            <button class="btn btn-danger btn-xs" onclick="ScreachBack()" style="padding: 1px 12px;">返回</button>
                        </div>
                    </div>

                    <hr style="margin: 0;" />

                    <div style="overflow-y: auto; height: 670px;margin-left: -10px;margin-right: -10px;" id="resultlist">
                    </div>
                </div>
            </div>
            <div id="main1" class="tab">
                <div style="margin-left: 10px; line-height: 30px; font-size: 12px;">
                    <span style="margin: 5px 8px;">
                        <input type="radio" name="p_schame" value="0" />最快路线</span>
                    <span style="margin: 5px 8px;">
                        <input type="radio" name="p_schame" value="1" checked="checked" />最短线路</span>
                    <span style="margin: 5px 8px;">
                        <input type="radio" name="p_schame" value="2" />不走高速</span>
                </div>

                <div style="position: relative; padding-left: 0 10px;">
                    <div style="width: 30px; text-align: center; vertical-align: middle; position: absolute; top: 50%; display: inline-block; margin-top: -17px;"
                        title="调换起止点">
                        <input style="width: 26px; height: 26px; background: url(Resource/themes/default/images/Map/combg.png) no-repeat 0 -86px; cursor: pointer; margin-top: auto; margin-bottom: auto; border: 0; background-color: transparent;"
                            onclick="PathSearch.switchDirection();" />
                    </div>
                    <div style="position: relative; width: 100%; margin-left: 33px;">
                        <p style="position: relative;">
                            <img title="请输入驾车起点" style="width: 10px; height: 10px; background: url(Resource/themes/default/images/Map/combg.png) no-repeat -127px -88px; border: 0; vertical-align: middle; margin-right: 2px;"
                                src="Resource/themes/default/images/Map/transparent.gif" />
                            <input id="startPoint" type="text" style="height: 26px; line-height: 26px; margin: 5px 0 5px 5px; vertical-align: middle; border: 0; border-bottom: #e5e5e5 solid 1px;" />
                            <input type="button" style="width: 26px; height: 26px; cursor: pointer; border: 0; vertical-align: middle; margin-left: 3px; background: url(Resource/themes/default/images/Map/combg.png) no-repeat 0 0; background-position: -28px -90px;"
                                title="绘制起点" onclick="PathSearch.setStart()" />
                        </p>
                        <p id="waypoints" style="display: none;"></p>
                    </div>
                    <div style="position: relative; width: 100%; margin-left: 33px;">
                        <p style="position: relative;">
                            <img title="请输入驾车终点" style="width: 10px; height: 10px; background: url(Resource/themes/default/images/Map/combg.png) no-repeat -137px -88px; border: 0; vertical-align: middle; margin-right: 2px;"
                                src="Resource/themes/default/images/Map/transparent.gif" />
                            <input id="endPoint" type="text" style="height: 26px; line-height: 26px; margin: 5px 0 5px 5px; vertical-align: middle; border: 0; border-bottom: #e5e5e5 solid 1px;" />
                            <input type="button" style="width: 26px; height: 26px; cursor: pointer; border: 0; vertical-align: middle; margin-left: 3px; background: url(Resource/themes/default/images/Map/combg.png) no-repeat 0 0; background-position: -54px -90px;"
                                title="绘制终点" onclick="PathSearch.setEnd()" />
                        </p>
                    </div>
                </div>

                <div style="margin: 10px 12px 0px 12px; padding-bottom: 10px; font-size: 10px;">
                    <a onclick="PathSearch.doSearch()" style="height: 28px; cursor: pointer; background-color: red; border: 0; display: inline-block; line-height: 28px; color: #fff; vertical-align: middle; padding-right: 5px;">
                        <img style="width: 16px; height: 24px; background: url(Resource/themes/default/images/Map/combg.png) no-repeat 0 0; margin: 0 7px; vertical-align: middle; background-position: -78px -86px;"
                            src="Resource/themes/default/images/Map/transparent.gif" />查询线路</a>
                    <a onclick="PathSearch.clearResult()" style="height: 28px; cursor: pointer; background-color: red; border: 0; display: inline-block; line-height: 28px; color: #fff; vertical-align: middle; padding-right: 5px;">
                        <img style="width: 16px; height: 24px; background: url(Resource/themes/default/images/Map/combg.png) no-repeat 0 0; margin: 0 7px; vertical-align: middle; background-position: -94px -86px;"
                            src="Resource/themes/default/images/Map/transparent.gif" />清除结果</a>
                    <%--<a onclick="PathSearch.addWaypoint()" style="height: 28px; cursor: pointer; background-color: red; border: 0; display: inline-block; line-height: 28px; color: #fff; vertical-align: middle; padding-right: 5px;">
                        <img style="width: 16px; height: 24px; background: url(Resource/themes/default/images/Map/combg.png) no-repeat 0 0; margin: 0 7px; vertical-align: middle; background-position: -109px -86px;"
                            src="Resource/themes/default/images/Map/transparent.gif" />添加途经点</a>--%>
                </div>

                <!-- 结果面板 -->
                <div id="resultDiv" style="height: 550px; overflow-y: auto;">
                </div>
            </div>
        </div>
    </div>
    <div id="rightDiv" class="rightDiv">
        <div class="moveblock moveblock-left" id="moveblock" style="">
            <%--<span class="glyphicon glyphicon-chevron-left" style="color: #fff;"></span>--%>
        </div>

        <div class="toolbarDiv">
            <ul style="margin: 3px 0;">
                <li id="vec_img">
                    <div title="地图" style="position: absolute; top: 0; left: 0; width: 63px; height: 22px; line-height: 22px; border: #c9c9c9 solid 1px;" class="toolActive" onclick="switchVecLayer()">
                        地图
                    </div>
                    <div title="影像" style="position: absolute; top: 0; left: 63px; width: 63px; height: 22px; line-height: 22px; border: #c9c9c9 solid 1px; border-left: none;" onclick="switchImgLayer()">
                        影像
                    </div>
                </li>

                <li class="btnToolbar" style="margin-right: 20px;" onmouseover="$('#toolbag_div').css('display', 'block')" onmouseout="$('#toolbag_div').css('display', 'none')">
                    <span></span>工具
                    <div id="toolbag_div" style="width: 54px; border: 1px solid rgba(255, 0, 0, 0.6); background: #f4f9fd; display: none; color: #777777; margin-top: 2px;">
                        <ul style="padding: 0; list-style-type: none;">
                            <li onclick="ClearMap();measureTool_Path.activate();">测距</li>
                            <li onclick="ClearMap();measureTool_Polygon.activate();">测面</li>
                        </ul>
                    </div>
                </li>

                <li class="btnToolbar" onclick="ClearMap()">
                    <span></span>清除
                </li>

                <li class="btnToolbar" onclick="GlobalMap()">
                    <span></span>全图
                </li>
            </ul>
        </div>

        <div id="mapDiv"></div>
    </div>
    <div style="clear: both"></div>
</body>
</html>
